<template>
  <div class="app-container">
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="138px" v-loading="isLoading" :disabled="packFlag">
      <el-row type="flex">
        <el-col :offset="4" :span="12">
          <el-form-item label="发起清算行/发起行：" prop="brno">
            <el-select style="width: 100%" v-model="submitParams.brno" placeholder="">
              <el-option
                v-for="option in brNoList"
                :key="option.code"
                :label="`${option.code}-${option.text}`"
                :value="option.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :offset="4" :span="12">
          <el-form-item label="打包方式：" prop="relationship">
            <el-select style="width: 100%" v-model="submitParams.relationship" @change="changeHandle($event, 'relationship')" placeholder="">
              <el-option
                v-for="dict in dictMap.RELATIONSHIP"
                :key="dict.value"
                :label="`${dict.value}-${dict.text}`"
                :value="dict.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div v-if="submitParams.relationship != '0'">
        <div>
          <el-row type="flex">
            <el-col :offset="4" :span="12">
              <el-form-item label="打包时机选择：" prop="timeType">
                <el-select style="width: 100%" v-model="submitParams.timeType" @change="changeHandle($event, 'timeType')" placeholder="">
                  <el-option
                    v-for="dict in dictMap.TIME_TYPE"
                    :key="dict.value"
                    :label="`${dict.value}-${dict.text}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" v-if="submitParams.relationship == '2'">
            <el-col :offset="4" :span="12">
              <el-form-item label="打包起点笔数：" prop="miniRecords">
                <el-input
                  v-model="submitParams.miniRecords"
                  @input="miniRecordsCheck"
                  maxlength="4"
                  oninput = "value=value.replace(/[^\d]/g,'')"
                  placeholder="" />
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="submitParams.relationship != '0' && submitParams.timeType != '1'">
            <el-row type="flex">
              <el-col :offset="4" :span="12">
                <el-form-item label="固定间隔打包(分钟)：" prop="fixInterval">
                  <el-input v-model="submitParams.fixInterval" oninput = "value=value.replace(/[^\d]/g,'')" placeholder="" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :offset="4" :span="6">
                <el-form-item label="起始时间点  小时：" prop="hour1">
                  <el-select style="width: 100%" v-model="submitParams.hour1" placeholder="">
                    <el-option
                      v-for="dict in dictMap.HOUR"
                      :key="dict.value"
                      :label="`${dict.value}`"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="分钟：" prop="minute1">
                  <el-select style="width: 100%" v-model="submitParams.minute1" placeholder="">
                    <el-option
                      v-for="dict in dictMap.MINUTE"
                      :key="dict.value"
                      :label="`${dict.value}`"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row type="flex">
              <el-col :offset="4" :span="6">
                <el-form-item label="结束时间点  小时：" prop="hour2">
                  <el-select style="width: 100%" v-model="submitParams.hour2" placeholder="">
                    <el-option
                      v-for="dict in dictMap.HOUR"
                      :key="dict.value"
                      :label="`${dict.value}`"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="分钟：" prop="minute2">
                  <el-select style="width: 100%" v-model="submitParams.minute2" placeholder="">
                    <el-option
                      v-for="dict in dictMap.MINUTE"
                      :key="dict.value"
                      :label="`${dict.value}`"
                      :value="dict.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div v-if="submitParams.relationship != '0' && submitParams.timeType != '2'">
          <el-row type="flex">
            <el-col :offset="4" :span="6">
              <el-form-item label="固定时间点  小时：" prop="hour">
                <el-select style="width: 100%" v-model="submitParams.hour" placeholder="">
                  <el-option
                    v-for="dict in dictMap.HOUR"
                    :key="dict.value"
                    :label="`${dict.value}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="分钟：" prop="minute">
                <el-select style="width: 100%" v-model="submitParams.minute" placeholder="">
                  <el-option
                    v-for="dict in dictMap.MINUTE"
                    :key="dict.value"
                    :label="`${dict.value}`"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="discountReceipt-pick-operate-box">
            <div class="operate-box-bottom-paging">
              <div class="bottom-content">
                <ht-table
                  ref="dataTable"
                  :showSerialNumber="false"
                  :multi-select="false"
                  :opButtonList="opButtonList"
                  :showRightToolbar="false"
                  :reqConfig="reqConfig"
                  :queryParams="queryParams"
                  :tableBindColumns="tableBindColumns"
                  :showPagination="false"
                  :randomRowKey="true"
                >
                  <template v-slot:operate>
                    <el-table-column
                      label="操作"
                      align="center"
                      width="500"
                      fixed="right"
                      class-name="small-padding fixed-width"
                    >
                      <template slot-scope="scope">
                        <ht-button-group
                          :buttonList="[
                            {
                              label: '删除',
                              // permission: 'user:xxx:xxx',
                              doFunc: () => {
                                handleAction('del', scope.row, scope.$index);
                              },
                            },
                          ]"
                        />
                      </template>
                    </el-table-column>
                  </template>
                </ht-table>
              </div>
            </div>
          </div>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="fixTimeDetail.length">
          </el-pagination>
        </div>
      </div>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm" :loading="isLoading" :disabled="packFlag">提交</el-button>
<!--      <el-button type="warning" @click="refresh" :loading="isLoading">重置</el-button>-->
    </div>
  </div>
</template>

<script>
import { query,queryUrl, submit,apiUrlConfig } from "@/api/cnaps/bizMng/beps_bale_method_maintain.js";
import { listPageMixin } from "@/libs/listPageMixin";
import {mapGetters} from "vuex";
export default {
  name: "generalInformationEntry",
  mixins: [listPageMixin],
  components: {},
  computed: {
    ...mapGetters(["globalBusData"]),
  },
  data() {
    return {
      reqConfig: apiUrlConfig,
      queryParams: {
        brno: "",
      },
      brNoList: [],
      packFlag: false,
      isStBrno: false,
      isLoading: false,
      tableBindColumns: [{ label: `固定时间点列表`, prop: "fixTimeList", width: "510", align: "center" }],
      opButtonList: () => {
        return [
          {
            label: "新增",
            type: "primary",
            icon: "el-icon-plus",
            permission: "user:expandConfInfo:add",
            actionType: "add",
            clickFun: () => {
              this.addRow();
            },
          },
        ];
      },
      // 录入参数
      submitParams: {
        brno: "",
        relationship: "",
        timeType: "",
        miniRecords: "",
        fixInterval: "",
        hour1: "",
        minute1: "",
        hour2: "",
        minute2: "",
      },
      searchFormDictList: ["RELATIONSHIP", "TIME_TYPE", "HOUR", "MINUTE"],
      rules: {
        brno: [{ required: true, message: "不能为空", trigger: "change" }],
        relationship: [{ required: true, message: "不能为空", trigger: "change" }],
        timeType: [{ required: true, message: "不能为空", trigger: "change" }],
        miniRecords: [{ required: true, message: "不能为空", trigger: "change" }],
        fixInterval: [{ required: true, message: "不能为空", trigger: "change" }],
        hour1: [{ required: true, message: "不能为空", trigger: "change" }],
        minute1: [{ required: true, message: "不能为空", trigger: "change" }],
        hour2: [{ required: true, message: "不能为空", trigger: "change" }],
        minute2: [{ required: true, message: "不能为空", trigger: "change" }],
        hour: [{ required: true, message: "不能为空", trigger: "change" }],
        minute: [{ required: true, message: "不能为空", trigger: "change" }],
      },
      currentPage: 1,
      pageSize: 20,
      fixTimeDetail: [],
      max: 2000,
    };
  },
  created() {
    this.isLoading = true
    queryUrl().then((res) => {
      this.brNoList = res.result;
      this.queryParams.brno = this.brNoList[0].code;
      if (this.brNoList[0].packFlag) {
        this.packFlag = this.brNoList[0].packFlag;
        this.$message.warning("当前打包方式为清算行，分行不能设置打包方式。")
        this.isLoading = false
        return;
      }
      this.$refs.dataTable.doQuery();
      query(this.brNoList[0].code).then((res) => {
        if (res.result !== undefined) {
          this.submitParams = res.result;
          this.submitParams.brno = this.brNoList[0].code;
        }
        this.isLoading = false
      });
    });

  },

  methods: {

    //切换每页显示数据量时的回调
    handleSizeChange (size) {
      this.pageSize = size;
      this.handleCurrentChange(this.currentPage);
    },
    //切换页码回调
    handleCurrentChange (currentPage) {
      let page = this.fixTimeDetail.slice((currentPage-1)*this.pageSize,currentPage*this.pageSize);
      this.$refs.dataTable.dataList = page
      this.currentPage = currentPage;
    },
    changeHandle(value,condi){
      if (condi === 'relationship'){
        this.$set(this.submitParams, "timeType", "");
      }
      this.$set(this.submitParams, "miniRecords", "");
      this.$set(this.submitParams, "fixInterval", "");
      this.$set(this.submitParams, "hour", "");
      this.$set(this.submitParams, "minute", "");
      this.$set(this.submitParams, "hour1", "");
      this.$set(this.submitParams, "minute1", "");
      this.$set(this.submitParams, "hour2", "");
      this.$set(this.submitParams, "minute2", "");
      this.$set(this.submitParams, "listFixTime", []);
      this.$refs.dataTable.dataList = [];
      this.fixTimeDetail = [];
    },
    miniRecordsCheck(value){
      if(value > this.max) {
        this.submitParams.miniRecords = this.max;
      }
    },
    /** 提交按钮 */
    submitForm: function () {
      if (this.submitParams.relationship != "0" && this.submitParams.timeType != "2") {
        this.submitParams.listFixTime = this.fixTimeDetail;
      }
      let sendRes = this.submitParams;
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          this.loading = true;
          submit(sendRes)
            .then(() => {
              this.msgSuccess("提交成功");
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      if (
        this.submitParams.relationship == "0" ||
        (this.submitParams.relationship != "0" && this.submitParams.timeType == "2")
      ) {
        this.resetForm("submitParams");
        return;
      } else {
        this.resetForm("submitParams");
        this.$set(this.$refs.dataTable, "dataList", []);
      }
    },

    //增加行
    addRow() {

      if (this.submitParams.hour && this.submitParams.minute) {
        let fixTime = this.submitParams.hour + ":" + this.submitParams.minute;
        let list = {fixTimeList: fixTime};
        for (let i = 0;i<this.fixTimeDetail.length;i++){
          if (this.fixTimeDetail[i].fixTimeList === fixTime){
            this.msgError("同一固定时间只可新增一次");
            return;
          }
        }
        this.$refs.dataTable.dataList.push(list);
        this.fixTimeDetail.push(list)
        this.handleCurrentChange(this.currentPage);
      }
    },
    /** 明细按钮操作 */
    handleAction(type, row, index) {
      switch (type) {
        case "del":
          // 删除
          this.$confirm("确定删除该条时间信息吗？?", "警告", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }).then(() => {
            let delIndex = (this.currentPage-1) * this.pageSize + index;
            this.fixTimeDetail.splice(delIndex, 1);
            this.$refs.dataTable.dataList = this.fixTimeDetail
            if(index === 0 && this.currentPage !== 1){
              this.handleCurrentChange(this.currentPage-1);
            }else {
              this.handleCurrentChange(this.currentPage);
            }
          });
          break;
      }
    },
  },
};
</script>
<style>
.app-container {
  overflow: scroll;
}

.dialog-footer {
  margin: 10px 0;
  text-align: center;
}
hr {
  border-bottom: 0px;
  margin-bottom: 25px;
}
</style>
